<template>
  <div id="app">
    <input type="file" @change="onFileChange" />
    <div v-if="imageData" style="margin-top: 20px">
      <img :src="imageData" alt="Selected Image" style="max-width: 300px; max-height: 300px" />
    </div>
  </div>
</template>
  
  <script lang="ts" setup>
import { ref } from 'vue';
import { compressBase64, decompressBase64 } from '@/hooks/myPako';

let imageData = ref('');

const onFileChange = event => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = e => {
      imageData.value = e.target.result;
      console.log(imageData.value);
      // 压缩数据
      compressBase64(imageData.value).then(compressedBase64 => {
        console.log('Compressed Base64:', compressedBase64);

        // 解压缩数据
        decompressBase64(compressedBase64).then(decompressedData => {
          console.log('Decompressed Data:', decompressedData);
        });
      });
    };
    reader.readAsDataURL(file); // 将文件读取为 DataURL (Base64)
  }
};
</script>
  
  <style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

button {
  margin-right: 5px;
  cursor: pointer;
}

td,
th {
  text-align: left;
  padding: 8px;
}
</style>
  